<template>
  <div class="interview-manage">
    <a-input-search
      placeholder="输入面经id进行搜索"
      style="width: 400px"
      size="large"
      :allowClear="true"
      @search="onSearch"
    />
    <a-table
      :columns="columns"
      :row-key="(record) => record._id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="articleId" slot-scope="text">
        {{ text }}
      </template>
      <template slot="userId" slot-scope="text">
        {{ text }}
      </template>
      <template slot="articleTitle" slot-scope="text">
        {{ text }}
      </template>
      <template slot="create_at" slot-scope="text">
        {{ formatTime(text) }}
      </template>
      <template slot="status" slot-scope="text">
        <div
          :class="{
            checkOK: text === 1,
            checkFail: text === 0,
            waitCheck: text === 2,
          }"
        >
          {{ text | checkStatus }}
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-space>
          <span @click="check(record)" class="check">
            {{ record.status === 2 ? "审核" : "查看" }}
          </span>
          <span>|</span>
          <span @click="deleteOne(record)" class="delete"> 删除 </span>
        </a-space>
      </template>
    </a-table>

    <Popup v-if="isShow" :detail="detail" @close="close" @verify="verify" />
  </div>
</template>

<script>
const align = "center";
const columns = [
  {
    title: "面经ID",
    dataIndex: "_id",
    key: "_id",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "articleId" },
  },
  {
    title: "所属用户ID",
    dataIndex: "userId",
    key: "userId",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "userId" },
  },
  {
    title: "面经标题",
    dataIndex: "title",
    key: "title",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "articleTitle" },
  },
  {
    title: "发布时间",
    dataIndex: "publishTime",
    key: "publishTime",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "create_at" },
  },
  {
    title: "审核状态",
    dataIndex: "verifiedStatus",
    key: "verifiedStatus",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "status" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "operation" },
  },
];
import Popup from "../../../components/Popup/Popup";
import { formatTime } from "@/common/Utils";
import {
  getArticleDetail,
  getArticleList,
  deleteArticle,
  getNickname,
  verifyArticle,
  searchArticle,
} from "@/network/articles";

export default {
  name: "",
  data() {
    return {
      data: {},
      pagination: {
        hideOnSinglePage: true,
        defaultPageSize: 9,
        showQuickJumper: true,
      },
      loading: false,
      columns,

      isShow: false,
      detail: {},
      tableData: [],
    };
  },
  components: {
    Popup,
  },
  filters: {
    checkStatus(value) {
      if (value === 1) {
        return "审核通过";
      } else if (value === 0) {
        return "审核不通过";
      }
      return "  待审核";
    },
  },
  created() {
    this.getList();
  },
  methods: {
    formatTime(time) {
      return formatTime(new Date(time));
    },

    async onSearch(value, event) {
      console.log("value", value);
      if (value) {
        const res = await searchArticle(value);
        console.log(res);
        if (res.data.code === 200) {
          this.tableData = [res.data.data];
        }
      } else {
        this.getList()
      }
    },

    async check(record) {
      const { _id, userId } = record;
      const nickname = await getNickname(userId);
      const res = await getArticleDetail(_id);
      const data = res.data.data;
      this.detail = {
        articleId: data._id,
        verifiedStatus: data.verifiedStatus,
        title: data.title,
        nickname: nickname.data.data,
        time: data.publishTime,
        firm: data.baseInfo.firm,
        position: data.baseInfo.position,
        city: data.baseInfo.city,
        workInfo: data.background.workInfo,
        interviewDetail: data.interview.detail,
        interviewConsole: data.interview.interviewConsole,
      };
      this.isShow = !this.isShow;
    },

    deleteOne(record) {
      const self = this;
      this.$confirm({
        title: "提示",
        content: "此操作将永久删除该面经, 是否继续?",
        okText: "确认",
        cancelText: "取消",
        async onOk() {
          const res = await deleteArticle(record?._id);
          const message = res.data.code === 200 ? "删除成功!" : "删除失败!";
          self.$message.success(message, 1);
          self.getList();
        },
        onCancel() {
          self.$message.info("取消删除", 1);
        },
      });
    },

    getList() {
      getArticleList().then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
        const pagination = { ...this.pagination };
        pagination.total = this.tableData.length;
        this.loading = false;
        this.pagination = pagination;
      });
    },

    deleteMsg(id) {
      console.log(id);
      const self = this;
      this.$confirm({
        title: "删除用户",
        content: "确定删除该用户吗",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          self.$message.success("已成功删除该用户");
        },
        onCancel() {
          // self.$message.info('取消退出登录');
        },
      });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      console.log("params:", params);
      this.loading = true;

      getArticleList().then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
        const pagination = { ...this.pagination };
        pagination.total = this.tableData.length;
        this.loading = false;
        this.pagination = pagination;
      });
      // reqwest({
      //   url: "https://randomuser.me/api",
      //   method: "get",
      //   data: {
      //     results: 10,
      //     ...params,
      //   },
      //   type: "json",
      // }).then((data) => {
      //   const pagination = { ...this.pagination };
      //   // Read total count from server
      //   // pagination.total = data.totalCount;
      //   pagination.total = 200;
      //   this.loading = false;
      //   this.data = data.results;
      //   this.pagination = pagination;
      // });
    },

    close() {
      this.isShow = !this.isShow;
    },

    verify(params) {
      verifyArticle(params);
      this.close();
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.interview-manage {
  width: 100%;
  text-align: center;
  /deep/.ant-input-affix-wrapper {
    margin-bottom: 25px;
  }
  .checkOK {
    color: green;
  }
  .checkFail {
    color: red;
  }
  .waitCheck {
    color: #bbbbbb;
  }
  .check {
    color: #bbbbbb;
    cursor: pointer;
    &:hover {
      color: #041527;
    }
  }
  .delete {
    color: #bbbbbb;
    cursor: pointer;
    &:hover {
      color: #ff4d4f;
    }
  }
}
</style>
